<template>
  <view class="container">
	<top-back-navbar position="fixed" title="租金-充值" background="#001b4d" color="#ffff"></top-back-navbar>
    <view class="big_title f-w-700">充值金额</view>
    <view class="header">
      <view class="header-input">
        <u-input v-model="money" type="number" placeholder="请输入充值金额" input-align="center" placeholder-style="color: #fff;"
          :custom-style="{'color': '#fff', 'fontSize': '50rpx'}"></u-input>
      </view>
      <view class="abso_box">可充值金额:{{payInfo.credit2 || '0.00'}}</view>
    </view>
	<view class="footer">
	  <button class="btn" type="primary" @click="ljcz">立即充值</button>
	</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        money:'',
		payInfo:{}
      };
    },
    onLoad: function() {
	  this.$GetOpenid().then(res=>{
		  this.openid=res;
		  this.getPayInfo()
	  })
    },
    methods: {
      async getPayInfo() {
        let {
          data
        } = await this.$myRequest({
          url: "/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member&app=1",
          data: {
            openid: this.openid
          }
        })
        console.log(data)
        this.payInfo = data;
      },
      async ljcz() {
	    let kyNum=this.payInfo.credit2>0?parseFloat(this.payInfo.credit2):0;
		console.log('kyNum',kyNum)
		console.log('kyNum',this.money)
		if(this.money>kyNum){
			this.money='';
			return uni.showToast({
						title:'可充值金额不足，请重新输入',
						icon:'none'
					})
			
		}
        var datas = {
          'openid': this.openid,
          'num': this.money,
        }
        let {data} = await this.$myRequest({
          url: '/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.credit_to_nynum&app=1',
          method: 'post',
          data: datas,
        })
		if (data.error == 0) {
		  uni.showModal({
		  	content: '充值成功',
		  	confirmText: "确定",
		  	showCancel:false,
		  	success: res => {
				if(res.confirm){
					this.money='';
					this.getPayInfo()
				}
		  	}
		  })
		}else{
			uni.showToast({
				title:data.message,
				icon:'none'
			})
		}
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #f2f5fa;
    box-sizing: border-box;
  }
  .container{
	  padding: 0 30rpx 30rpx 30rpx;
	  height: 100%;
  }

  .big_title {
    font-size: 32rpx;
    color: #1e1310;
	font-weight: 600;
  }

  .header {
    background-color: #001b4d;
    width: 100%;
    box-sizing: border-box;
    border-radius: 20rpx;
    box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);;
    margin: 20rpx 0 30rpx;
    color: #fff;
	padding:30rpx;
	.header-input{
		margin-top:30rpx;
	}
  }

  .abso_box {
    border-top:1px solid #fff;
	margin-top:30rpx;
	padding:20rpx 0;
	font-size: 28rpx;
	color:#fff;
  }

  .radio_list {
    margin-bottom: 30rpx;
    box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);;
    border-radius: 20rpx;
    padding: 0 20rpx;
    overflow: hidden;
    background-color: #FFFFFF;

    .radio_item {
      width: 100%;
      height: 110rpx;
      box-sizing: border-box;
      padding: 0 30rpx;
      border-bottom: 1px solid #EAEAEA;

      image {
        width: 70rpx;
        margin-right: 20rpx;
      }

      view {
        font-size: 30rpx;
      }

      radio {
        transform: scale(0.8, 0.8);
      }
    }
  }

  .choose_image {
    background-color: #FFFFFF;
    width: 100%;
    height: 330rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);;
    margin: 30rpx 0 80rpx;
    padding: 20rpx;
    color: #666;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .texts {
    margin-top: 30rpx;

    >view {
      margin-bottom: 10rpx;
    }
  }

  .footer {
    // position: fixed;
    // bottom: 50rpx;
    width: 100%;
    // padding: 0 50rpx;
    box-sizing: border-box;
  }

  .footer button {
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 50rpx;
    background: #32539b;
  }

  .footer button.button-hover {
    background: #dc4d4d;
  }
</style>
